<template>
	<view>
		<view class="main">
			<view class="head">
				<template v-if="myimg">
					<image class="hd-img" :src="myimg" mode=""></image>
					<view class="hd-text">
						<view class="hd-t-top" @tap="login"> {{myname}} </view>
						<view class="hd-t-down"> 注销 </view>
						<image class="hd-right-img" src="https://s3.bmp.ovh/imgs/2021/08/bb7f15cb769ce2b3.png" mode="">
						</image>
					</view>
				</template>
				<template v-else>
					<image class="hd-img" src="" mode=""></image>
					<view class="hd-text">
						<view class="hd-t-top" @tap="login"> 立即登录 </view>
						<view class="hd-t-down"> 登录后可收藏喜欢的菜谱 </view>
						<image class="hd-right-img" src="https://s3.bmp.ovh/imgs/2021/08/bb7f15cb769ce2b3.png" mode="">
						</image>
					</view>
				</template>
			</view>
			<template>
				<view v-if="vip==false" class="vipbg">
					<view class="yellow-t"> 升级为VIP </view>
					<image class="vip-right-yellow" src="https://s3.bmp.ovh/imgs/2021/08/092836eb02fb84bf.png" mode="">
					</image>
				</view>
				<view v-if="vip" class="vipbg">
					<view class="yellow-t"> 到期时间：{{vipdate[2]}}年{{vipdate[0]}}月{{vipdate[1]}}日</view>
					<image class="vip-right-yellow" src="https://s3.bmp.ovh/imgs/2021/08/092836eb02fb84bf.png" mode="">
					</image>
				</view>
			</template>
			<view class="three-text">
				<view class="three-t-main">
					<view class="main-only">
						<image class="mo-img" src="../../static/my/sc.png" mode=""></image>
						<view class="mo-text"> 我的收藏 </view>
					</view>
					<view class="main-only">
						<image class="mo-img" src="../../static/my/jl.png" mode=""></image>
						<view class="mo-text"> 浏览记录 </view>
					</view>
					<view class="main-only">
						<image class="mo-img" src="../../static/my/dz.png" mode=""></image>
						<view class="mo-text"> 点赞 </view>
					</view>
				</view>
			</view>
			<view class="five-swiper">
				<view class="five-swiper-top">
					<text v-for="item in Foods" :key="item.id" :class="{ foodActive: item.id == nowFoodId }"
						@tap="nowId(item.id)">{{ item.name }}</text>
				</view>
				<template v-if="toLong">
					<template v-if="showAll">
						<swiper class="swiperMain" :style="{ height: LongHeight }" circular="true" :current="nowFoodId"
							@change="swiperCurrent">
							<swiper-item>
								<view class="swiper-item">
									<view v-for="item in initIngredient" :key="item.id" class="swiper-item-text">
										<view class="swiper-item-text-left">{{
                                            item.name
                                        }}</view>
										<view class="swiper-item-text-right">{{
                                            item.count
                                        }}</view>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">2</view>
							</swiper-item>
						</swiper>
					</template>
					<template v-else>
						<swiper class="swiperMain" :style="{ height: fiveHeight }" circular="true" :current="nowFoodId"
							@change="swiperCurrent">
							<swiper-item>
								<view class="swiper-item">
									<view v-for="item in fiveshuju" :key="item.id" class="swiper-item-text">
										<view class="swiper-item-text-left">{{
                                            item.name
                                        }}</view>
										<view class="swiper-item-text-right">{{
                                            item.count
                                        }}</view>
									</view>
									<view class="swiper-item-text-bottom" @tap="openAll">展开全部<image
											src="../../static/my/zk.png" mode=""></image>
									</view>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item">2</view>
							</swiper-item>
						</swiper>
					</template>
				</template>
				<template v-else>
					<swiper class="swiperMain" :style="{ height: SortHeight }" circular="true" :current="nowFoodId"
						@change="swiperCurrent">
						<swiper-item>
							<view class="swiper-item">
								<view v-for="item in initIngredient" :key="item.id" class="swiper-item-text">
									<view class="swiper-item-text-left">{{
                                        item.name
                                    }}</view>
									<view class="swiper-item-text-right">{{
                                        item.count
                                    }}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</template>
			</view>
			<view class="myCai">
				<view class="myCai-total"> 我的菜谱 </view>
				<swiper next-margin="450rpx" class="myCai-swiper">
					<swiper-item>
						<view class="myCai-swiper-item">
							<image class="myCai-swiper-item-img" src="" mode=""></image>
							<view class="myCai-swiper-item-text">蜜豆鲷鱼烧</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="myCai-swiper-item">
							<image class="myCai-swiper-item-img" src="" mode=""></image>
							<view class="myCai-swiper-item-text">蜜豆鲷鱼烧</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="twoMsg">
				<view class="twoMsg-eg">
					<view class="twoMsg-eg-l">
						<image class="twoMsg-eg-left" src="../../static/my/dz.png" mode=""></image>
						<view class="twoMsg-eg-middle">
							去APP Store给菜谱大全评分
						</view>
					</view>
					<image class="twoMsg-eg-right" src="../../static/my/right.png" mode=""></image>
				</view>
				<view class="twoMsg-eg">
					<view class="twoMsg-eg-l">
						<image class="twoMsg-eg-left" src="../../static/my/wt.png" mode=""></image>
						<view class="twoMsg-eg-middle"> 反馈问题 </view>
					</view>
					<image class="twoMsg-eg-right" src="../../static/my/right.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Foods: [{
						id: 0,
						name: '所有食材'
					},
					{
						id: 1,
						name: '蜜豆鱼片'
					},
					{
						id: 2,
						name: '川北凉粉'
					},
					{
						id: 3,
						name: '牛肉披萨'
					},
					{
						id: 4,
						name: '奶油泡芙'
					},
				],
				nowFoodId: 0,
				initIngredient: [{
						id: 0,
						name: '鸡蛋',
						count: '3个'
					},
					{
						id: 1,
						name: '鸡蛋',
						count: '3个'
					},
					{
						id: 2,
						name: '鸡蛋',
						count: '3个'
					},
					{
						id: 3,
						name: '鸡蛋',
						count: '3个'
					},
					{
						id: 4,
						name: '鸡蛋',
						count: '3个'
					},
					{
						id: 6,
						name: '鸡蛋',
						count: '3个'
					},
				],
				fiveshuju: [],
				showAll: false,
				LongHeight: '800rpx', //大于5条
				fiveHeight: '450rpx', //初始5条时
				SortHeight: '450rpx', //小于等于5条
				toLong: true, //数据条数大于5
				myimg:'',
				myname:'',
				myid:'',
				vip:false,//是不是vip
				vipdate:[],//vip到期时间
			};
		},
		methods: {
			login() {
				uni.getUserProfile({
					desc: '授权',
					success: res => { //拿到用户信息
						const userInfo = res.userInfo
						uni.login({
							success: async (res) => { //拿到code
								const result = await this.$request({
									url: '/user/wxLogin',
									method: 'POST',
									data: {
										code: res.code,
										appId: 'wxfb39c98d9e0219dc',
										appSecret: '5468ad05854dec646fb7b36389c4df20'
									},
								})
								if (result.token) {
									uni.setStorage({
										key: 'token',
										data: result.token
									})
									uni.setStorage({
										key: 'userInfo',
										data: userInfo
									})
									this.$store.commit('GET_TOKEN', result.token);
									this.$store.commit('GET_USERINFO', userInfo);
									this.getAuth()
								}
							}
						})
					}
				})
			},
			async getAuth() {
				const res = await this.$request({
					url: '/user/auth',
					header: {
						Authorization: this.$store.state.token
					},
					method: 'POST',
					data: {
						token: this.$store.state.token,
						avatarUrl: this.$store.state.userInfo.avatarUrl,
						nickName: this.$store.state.userInfo.nickName,
						gender: this.$store.state.userInfo.gender,
						province: this.$store.state.userInfo.province,
					}
				})
				if(res.code){
					this.myname=this.$store.state.userInfo.nickName;
					this.myimg=this.$store.state.userInfo.avatarUrl;
					this.getUser()
				}
			},
			getUser() {
				new Promise((resolve, reject) => {
					uni.getStorage({
						key: 'token',
						success: e => {
							resolve(e)
						}
					})
				}).then(async (e) => {
					const res = await this.$request({
						url: '/user/getUserInfo',
						header: {
							Authorization: e.data
						},
						data: {
							token: e.data
						},
					})
					console.log(res,'getUserInfo');
					if (res.length == 1) {
						uni.setStorage({
							key: 'userInfo',
							data: res[0]
						})
						this.myid=res[0]._id;
						this.myimg=res[0].avatarUrl;
						this.myname=res[0].nickName;
						this.vip=res[0].vip;
						const date=res[0].vipdate.split('/')
						this.vipdate=date;
						this.$store.commit('GET_USERINFO', res[0]);
						this.$store.commit('GET_TOKEN',e.data);
					}
				})
			},
			nowId(id) {
				this.nowFoodId = id;
			},
			swiperCurrent(e) {
				this.nowFoodId = e.detail.current;
			},
			openAll() {
				this.showAll = true;
			},
			getShuJu() {
				this.fiveshuju = this.initIngredient.filter((item, index) => {
					if (index < 5) {
						return item;
					}
				});
			},
		},
		onLoad() {
			this.getShuJu();
			if (!this.showAll) {
				this.LongHeight = this.initIngredient.length * 74 + 60 + 'rpx';
				this.SortHeight = this.initIngredient.length * 74 + 'rpx';
			}
			this.getUser()
		},
		onShow() {},
	};
</script>

<style scoped lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	.main {
		width: 100%;
		box-sizing: border-box;
		padding: 0 32rpx;
		border-bottom: 20rpx solid #f5f5f5;

		.head {
			background-color: #ffffff;
			width: 100%;
			box-sizing: border-box;
			padding: 34rpx 0;
			height: 158rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.hd-img {
				height: 116rpx;
				width: 116rpx;
				border-radius: 50%;
				background-color: yellow;
			}

			.hd-text {
				flex-grow: 1;
				margin-left: 20rpx;
				height: 116rpx;
				position: relative;

				.hd-t-top {
					margin-top: 10rpx;
					font-size: 30rpx;
				}

				.hd-t-down {
					margin-top: 10rpx;
					color: #d1d1d1;
					font-size: 24rpx;
				}

				.hd-right-img {
					position: absolute;
					height: 30rpx;
					width: 24rpx;
					right: 0;
					top: 30%;
				}
			}
		}

		.vipbg {
			width: 100%;
			height: 116rpx;
			position: relative;
			background-image: url(https://s3.bmp.ovh/imgs/2021/08/302691e00a80cf1a.png);
			background-size: 100%;
			background-repeat: no-repeat;

			.yellow-t {
				position: absolute;
				top: 20rpx;
				left: 100rpx;
				font-size: 28rpx;
				color: #b89766;
			}

			.vip-right-yellow {
				position: absolute;
				height: 30rpx;
				width: 24rpx;
				right: 60rpx;
				top: 20rpx;
			}
		}

		.three-text {
			padding: 20rpx 0;
			background-color: #f5f5f5;
			height: 162rpx;
			width: 100%;
			box-sizing: border-box;

			.three-t-main {
				background-color: #ffffff;
				height: 122rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 18rpx 0 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.main-only {
					height: 74rpx;
					width: 108rpx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					align-content: space-around;

					.mo-img {
						width: 34rpx;
						height: 34rpx;
					}

					.mo-text {
						width: 100%;
						text-align: center;
						font-size: 24rpx;
					}
				}
			}
		}

		.five-swiper {
			width: 100%;
			border-radius: 8rpx;

			.five-swiper-top {
				height: 64rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #f5f5f5;

				text {
					font-size: 24rpx;
				}

				.foodActive {
					color: #ee7b2d;
					font-size: 32rpx;
				}
			}

			.swiperMain {
				height: 450rpx;

				.swiper-item {
					.swiper-item-text {
						display: flex;
						align-items: center;
						height: 74rpx;
						width: 100%;
						border-bottom: 4rpx solid #f5f5f5;

						.swiper-item-text-left {
							width: 60%;
						}

						.swiper-item-text-right {
							width: 40%;
						}
					}

					.swiper-item-text-bottom {
						text-align: center;
						width: 100%;
						color: #cccccc;
						font-size: 28rpx;
						height: 60rpx;
						line-height: 60rpx;

						image {
							height: 20rpx;
							width: 20rpx;
						}
					}
				}
			}
		}

		.myCai {
			height: 386rpx;
			padding: 20rpx 0;
			box-sizing: border-box;
			background-color: #f5f5f5;

			.myCai-total {
				height: 76rpx;
				box-sizing: border-box;
				padding: 16rpx 0 32rpx 0;
				display: flex;
				align-items: center;
				background-color: #ffffff;
			}

			.myCai-swiper {
				height: 268rpx;
				width: 100%;
				margin-right: 32rpx;
				background-color: #ffffff;

				.myCai-swiper-item {
					width: 170rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.myCai-swiper-item-img {
						height: 208rpx;
						width: 170rpx;
						background-color: red;
						border-radius: 20rpx;
					}

					.myCai-swiper-item-text {
						font-size: 24rpx;
						text-align: center;
					}
				}
			}
		}

		.twoMsg {
			width: 100%;
			height: 190rpx;

			.twoMsg-eg {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 94rpx;
				border-bottom: 4rpx solid #f5f5f5;

				.twoMsg-eg-l {
					display: flex;
					align-items: center;

					.twoMsg-eg-left {
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}

					.twoMsg-eg-middle {
						color: #5a5a5a;
					}
				}

				.twoMsg-eg-right {
					width: 24rpx;
					height: 30rpx;
				}
			}
		}
	}
</style>
